<template>
  <div>
    <div class="main">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="200px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="靶场名称" prop="name">
          <el-input class="btn" v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="靶场图片" prop="img">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="靶场简介" prop="desc">
          <el-input class="btn" v-model="ruleForm.desc" type="textarea" />
        </el-form-item>

        <el-form-item label="难度" prop="region">
          <el-select class="btn" v-model="ruleForm.region" placeholder="请选择">
            <el-option label="简单" value="简单" />
            <el-option label="中等" value="中等" />
            <el-option label="困难" value="困难" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属类型" prop="fileClass">
          <el-select class="btn" v-model="ruleForm.fileClass" placeholder="请选择">
            <el-option label="SQL注入类" value="SQL注入类" />
            <el-option label="扫描类" value="扫描类" />
            <el-option label="文件类" value="文件类" />
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型" prop="fileType">
          <el-select class="btn" v-model="ruleForm.fileType" placeholder="请选择">
            <el-option label="镜像文件" value="镜像文件" />
            <el-option label="war" value="war" />
            <el-option label="zip" value="zip" />
          </el-select>
        </el-form-item>
        <el-form-item class="method" label="实验过程(过程解析)" style="white-space: nowrap;" prop="exe1">
          <el-input v-model="ruleForm.exe1" style="width: 300px; " class="btn" />
          
          <el-button class="btn1" @click="open">添加</el-button>
        </el-form-item>

        <el-form-item label="靶场文件地址" prop="address">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="flag" prop="flag">
          <el-input class="btn" v-model="ruleForm.flag" />
        </el-form-item>
        <el-form-item label="相关资料" prop="file">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
          <el-button @click="back()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"

    fullscreen
    :before-close="handleClose"
  >
   <wangeditor @editCallback="editCallback"/>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmWang">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup lang="ts">
import { reactive, ref,onMounted,onUnmounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {eventsBus} from "../../utils/eventBus"
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import wangeditor from './wang.vue'
import { onBeforeUnmount, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { h } from 'vue'
import {useRangData} from '../../store/rangData'

const router = useRouter();
const drawer = ref(false)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const route = useRoute();


const dialogVisible = ref(false)
const html = ref("")

function editCallback(h:string){
  console.log('html',h)
  html.value = h;
}
function confirmWang(){
  ruleForm.value.exe1 = html.value;
  dialogVisible.value = false;
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}


const ruleForm = ref({
  name: '',
  region: '',
  desc: '',
  fileType:'',
  fileClass:'',
  exe1:'',
  file:"",
  address:"",
  flag:'',
  wang:'',
  img:''
})
// ruleForm.value.exe1= Object.keys(route.query)?Object.keys(route.query):''
console.log(route.query);
const rules = reactive<FormRules>({
 exe1:[ { required: true, message: '请输入必填项' },],
  name: [
    { required: true, message: '请输入必填项', trigger: 'blur' },
    { min: 3, max: 20, message: '请输入3-20个字', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: '请选择一项',
      trigger: 'change',
    },
  ],
  fileType: [
    {
      required: true,
      message: '请选择一项',
      trigger: 'change',
    },
  ],
  fileClass: [
    {
      required: true,
      message: '请选择一项',
      trigger: 'change',
    },
  ]
  
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
    let a={
      name:ruleForm.value.name,
      region:ruleForm.value.region,
      fileType:ruleForm.value.fileType,
      fileClass:ruleForm.value.fileClass

    }
    console.log(a);
  
  useRangData().addData({
    id:`3`,
    name: a.name,
    level: a.region,
    category: a.fileClass,
    fileType: a.fileType,
    createBy: "3"
  })
  console.log(ruleForm.value);
    router.push('/home/rangeList')
    }
  })
}
onUnmounted(()=>{
  
  
})

//返回
const  back=()=>{
  router.go(-1)
}
const add =()=>{
  router.push('/home/wang')
}

  const open = () => {
  dialogVisible.value = true;
}

    const valueHtml = ref('')
    const editorConfig = { placeholder: '请输入内容...' }
    console.log(valueHtml);
    




</script>

<style lang="scss" scoped>
.nav1 {
  display: inline-block;
  margin: 20px 0 0 0;
}
.main {
  background-color: #fff;
  margin: 20px 0;
  padding: 20px;
}
.btn {
  width: 300px;
}
.method {
  margin: 0 20px;
  // width: 200px;
  margin: 0 0 20px 0;
}
.hide {
  display: none;
}
.btn1 {
  position: absolute;
  // top: 10px;
  left: 240px;
}
.avatar-uploader {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.301);
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}
.box {
  width: 80%;
  height: 200px;
}
</style>